<template>
    <BaseParam :label="label" :help="help">
        <el-input
            v-model="inputValue"
            :placeholder="config?.placeholder || '请输入'"
            :maxlength="config?.maxLength"
            :show-word-limit="config?.showWordLimit"
            @input="handleInput"
        />
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import BaseParam from './BaseParam.vue';
import type { ParamConfig } from './types';

const props = defineProps<{
    modelValue?: string;
    label: string;
    help?: string;
    config?: {
        placeholder?: string;
        maxLength?: number;
        showWordLimit?: boolean;
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
}>();

const inputValue = ref(props.modelValue || '');

watch(() => props.modelValue, (newValue) => {
    inputValue.value = newValue || '';
});

const handleInput = (value: string) => {
    emit('update:modelValue', value);
};
</script> 